<template>
    <el-dialog @open="open" v-model="isOpen" title="配置关联分类" @close="close" style="width: 30%;min-width: 300px;">
    <el-form inline class="demo-form-inline">
        <el-form-item  label="选择分类">
            <el-cascader
                    v-model="query.payload.parentName"
                    :options="options"
                    :props="caprops"
                    @change="handleChange"
            />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" activity @click="add">添加</el-button>
        </el-form-item>
    </el-form>
    <el-table ref="table" border :data="data.tableData" header-cell-class-name="headerClass">
        <el-table-column type="index" width="50" />
        <el-table-column align="center"  prop="brandName" label="品牌名" />
        <el-table-column align="center"  prop="catalogName" label="分类名" />
        <el-table-column align="center"  label="操作" width="120">
            <template #default="scope">
                <el-link title="取消分类" type="primary" @click="remove(scope.row.id)">
                     取消
                </el-link>
            </template>
        </el-table-column>
    </el-table>
        <br/>
        <el-pagination
                style="display: flex;align-items:center;justify-content:center;"
                v-model:currentPage="query.currentPage"
                v-model:page-size="query.pageSize"
                :page-sizes="[10, 20, 30]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="query.total"
                @size-change="queryRole"
                @current-change="queryRole"
        />
    </el-dialog>
</template>

<script setup>
    import request from '@/utils/request.js'
    import { ElMessage } from 'element-plus'
    import {ref,reactive,onUpdated} from 'vue'

    const configMenu = ref(null)
    const have = ref(true)
    let props = defineProps(['id','openType'])
    let isOpen = ref(false)
    let categoryId = null
    defineExpose({isOpen})
    const emits = defineEmits(['close'])
    let data = reactive({
        modRole:false,
        roleToMenu:false,
        tableData:[],
        type:"",
        id:"",
    });
    let caprops = {
        value:"catId",
        label:"name"
    }
    let options = reactive([])

    let query = reactive({payload:{id:0},currentPage:1,pageSize:10,total:0})

   function open() {
        queryData()
       request.get("/api/category/list/tree").then(resp => {
           options.push(...resp)
       });
       query.payload.parentName = null
       categoryId = null
    }

    function queryData(){
        query.payload.brandId = props.id
        request.post("/api/pmsBrand/getPmsCategoryBrandRelationPage", query).then(resp => {
            data.tableData = resp.records
            query.total = resp.total
        });
    }

    function close (){
        data.tableData=[]
       emits('close')
    }

    function add(){
        if(categoryId==null){
            ElMessage({message: '请选择分类',type: 'error'})
            return
        }
        request.get(`/api/pmsBrand/addCategoryBrandRelation/${props.id}/${categoryId}`, {}).then(resp => {
            queryData()
            categoryId = null
        });
    }

    function remove(id){
        request.get(`/api/pmsBrand/removeCategoryBrandRelation/${id}`).then(resp=> {
            queryData()
            ElMessage({message: '删除成功！',type: 'success'})
        });
    }

    function handleChange(e){
        categoryId = e[e.length-1]
    }
</script>
<style lang="css" scoped>

</style>